Questions

8 of 50

1What is a pseudo-class in CSS?

2How are pseudo-classes different from pseudo-elements?

3What is the syntax of a pseudo-class in CSS?

4Give some commonly used pseudo-classes.

5What does the :hover pseudo-class do?

6What’s the purpose of the :active pseudo-class?

7How does the :visited pseudo-class work for links?

8What is the :focus pseudo-class used for?

9What does the :checked pseudo-class do?

10How does the :disabled pseudo-class behave?

11What is the difference between :first-child and :first-of-type?

12How do :nth-child() and :nth-of-type() differ?

13How do you select every odd or even element using pseudo-classes?

14How can you style an element when it’s being hovered over along with its child?

15What does the :not() pseudo-class do?

16How can you use multiple pseudo-classes together?

17What is the difference between :link and :visited?

18What does the :target pseudo-class represent?

19How can you use :empty to detect empty elements?

20How does the :root pseudo-class differ from the html selector?

21What does the :valid and :invalid pseudo-class do?

22How can you use :required and :optional pseudo-classes in forms?

23What is the use of :in-range and :out-of-range?

24What does :read-only and :read-write do?

25How can you style an input field when it’s autofilled?

26How does the :focus-within pseudo-class work?

27What’s the difference between :focus and :focus-visible?

28What is the purpose of the :placeholder-shown pseudo-class?

29How can you style a checkbox when it is checked or unchecked?

30How can you style invalid form inputs without JavaScript?

31Can pseudo-classes be chained together? Give an example.

32What is the specificity of pseudo-classes compared to normal selectors?

33How can you use :not() effectively to exclude elements from styling?

34How does :has() pseudo-class work, and why is it powerful?

35Is :has() supported in all browsers?

36How does :is() differ from :where() in terms of specificity?

37How can you combine :is() or :where() with other selectors for cleaner code?

38What’s the difference between :nth-child() and :nth-last-child()?

39How can you style only the last element of a list using pseudo-classes?

40What does the :lang() pseudo-class do?

41How do you change a button’s color when hovered but not when disabled?

42How can you highlight the current section in a menu using :target?

43How can you style a form field differently when focused and valid?

44How do you style every third list item differently?

45How can you style alternate table rows without adding extra classes?

46How do you hide empty <p> tags using pseudo-classes?

47How can you style the parent when any child inside it is focused?

48How can you highlight a link only when it’s both focused and hovered?

49How can you style the first letter of only the first paragraph using pseudo-classes?

50How would you use :has() to select a <div> that contains an image?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

08 / 50

What is the :focus pseudo-class used for?

Understanding the :focus Pseudo-Class

The :focus pseudo-class in CSS applies styles to an element when it receives focus. This typically occurs when a user clicks on an input field, navigates to a button using the keyboard, or interacts with any focusable element. It provides visual feedback indicating that the element is active and ready for interaction.

Example: Using :focus

In this example, when the input field or button receives focus, its border and shadow change, providing a clear visual indicator of focus.

Best Practices

1
Use :focus to provide clear visual feedback for keyboard and accessibility users.
2
Avoid removing focus indicators entirely; if customizing, ensure a visible alternative exists.
3
Combine with :hover and :active for consistent interactive styling.
4
Test focus styles across browsers and devices to ensure accessibility compliance.